/*
 * @Author: xiongpj
 * @Email: xiongpeiji@innjoy.me
 * @Date: 2020-09-28 17:49:37
 * @Last Modified by: xiongpj
 * @Last Modified time: 2020-09-30 09:53:22
 * @Description: "设置面板-设置哪些图表显示，设置哪些顶部标题显示"
 */
<template>
  <div class="settingsPanel" v-show="seting">
      <div class="masking" @click="closePanel"></div>
      <div class="setting-panel-box">
          <h2 class="panel-title">数据看板</h2>
          <div class="data-list-box">
              <div class="data-left-box list-container">
                  <h3>统计设置</h3>
                  <div class="list-items">
                        <p v-for="(item,index) in leftList" :key="index">
                            <el-switch
                            v-model="item.val"
                            :disabled="isSix==6&&!item.val"
                            active-color="#1868E4"
                            inactive-color="#202224">
                            </el-switch>
                            <label>{{item.title}}</label>
                        </p>
                  </div>
              </div>
              <div class="data-right-box list-container">
                  <h3>图表设置</h3>
                  <div class="list-items">
                        <p v-for="(item,index) in rightList" :key="index">
                            <el-switch
                            v-model="item.val"
                            active-color="#1868E4"
                            inactive-color="#202224">
                            </el-switch>
                            <label>{{item.title}}</label>
                        </p>
                  </div>
              </div>
          </div>
          <div class="footer-btn">
              <el-button  type="primary" @click="save" size="medium">保存</el-button>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    props:{
        //设置面板显示隐藏
        seting:{
            type:Boolean,
            default:false
        },
        //设置顶部统计数据列表
        leftList:{
            type:Array,
            default:()=>{
                return []
            }
        },
        //右侧图表设置
        rightList:{
            type:Array,
            default:()=>{
                return []
            }
        }
    },
    data(){
        return{
            value:''
        }
    },
    computed: {
        isSix(){
            return this.leftList.filter(item=>item.val==true).length
        }
    },
    methods:{
        closePanel(){
            this.$emit('closePanel',this.seting)
        },
        //保存
        save(){
            if(this.isSix>6){
                this.$message.warning('最多可选6项');
                return;
            }
            let params = {
                leftList:this.leftList.filter(item=>item.val==true),
                rightList:this.rightList.filter(item=>item.val==true)
            }
            this.$emit('save',params)
        },
    },
}
</script>

<style scoped lang="scss">
.settingsPanel{
    .masking{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
    }
    .setting-panel-box{
        width: 615px;
        position: absolute;
        right: 0;
        top: 48px;
        z-index: 1000;
        background: #3F4144;
        .panel-title{
            padding-left: 20px;
            line-height: 60px;
            border-bottom: 1px solid #1E1F20;
        }
        .footer-btn{
            padding: 15px 30px;
            line-height: 60px;
            display: flex;
            align-items: center;
            justify-content:flex-end;
            border-top: 1px solid #1E1F20;
        }
        .data-list-box{
            display: flex;
            .list-container{
                flex: 1;
                padding: 20px;
                h3{
                   font-size: 16px; 
                   line-height: 16px;
                   margin-bottom: 30px;
                }
                .list-items{
                    p{
                        margin-bottom: 20px;
                        display: flex;
                        justify-content: left;
                        align-items: center;
                        label{
                            margin-left: 10px;
                            font-size: 16px;
                        }
                    }
                }
            }
            .data-left-box{
                border-right: 1px solid #1E1F20;
            }
        }
    }
}
</style>